import Cat2DocPopover from "./popover";
import {createElement} from "../utils/element";
/** 按钮元素 */
class Cat2DocButton {
    #button = null;
    #popover = null;
    #parentElement = null;
    constructor(parentElement, options) {
        this.#parentElement = parentElement;
        this.#button = this.#createButton(parentElement, options);
    }
    destory() {
        this.#button.remove();
        this.#button = null;
        if(this.#popover) {
            this.#popover.destory();
            this.#popover = null;
        }
    }
    get $el() {
        return this.#button;
    }
    #createButton(parentElement, options) {
        let button = createElement('button', parentElement, options);
        options.url && button.appendChild(createIcon(options.url));
        options.label && button.appendChild(createSpan(options.label));
        if(!button.style.cursor) {
            button.style.cursor = 'pointer';
        }
        // 设置浮动菜单
        if(options.popover) {
            this.#popover = new Cat2DocPopover(button, options.popover);
            button.addEventListener('mouseenter', ()=>{
                this.#popover.show();
            });
            button.addEventListener('mouseleave', ()=>{
                // this.#popover.hide();
            });
        }
        // 绑定配置的事件
        if(options.events) {
            Object.keys(options.events).forEach(key=>{
                button.addEventListener(key, event=>{
                    options.events[key](event, options);
                });
            });
        }
        return button;
    }
}


function createIcon(url) {
    let img = document.createElement('img');
    img.src = url;
    img.style.userSelect = 'none';
    return img;
}
function createSpan(label) {
    let span = document.createElement('span');
    span.innerHTML = label;
    return span;
}
export default Cat2DocButton;
